<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="nav-title">我的奖励</view>
				<view class="nav-right">
					<text class="more-icon">⋯</text>
					<text class="dash-icon">—</text>
					<text class="target-icon">◎</text>
				</view>
			</view>
		</view>

		<!-- 奖励金额区域 -->
		<view class="reward-section">
			<view class="reward-card">
				<view class="reward-header">
					<text class="reward-title">当前奖励金额 (元)</text>
					<text class="help-icon">?</text>
				</view>
				<!-- 修复数据绑定 -->
				<text class="reward-amount">{{ rewardData.currentAmount }}</text>
				<view class="withdraw-btn" @click="handleWithdraw">
					<text class="btn-text">立即提现</text>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">¥0</text>
						<text class="stat-label">昨日收益</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">¥0</text>
						<text class="stat-label">累计已提</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态区域 -->
		<!-- 修复空状态显示逻辑 -->
		<view class="empty-state" v-if="rewardData.currentAmount <= 0">
			<view class="empty-icon">
				<text class="icon-text">📄</text>
				<text class="icon-magnifier">🔍</text>
				<text class="icon-plus">+</text>
				<text class="icon-minus">-</text>
			</view>
			<text class="empty-text">暂无奖励</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rewardData: {
					currentAmount: 11,
					yesterdayEarnings: 0,
					totalWithdrawn: 0
				}
			}
		},
		onLoad(options) {
			// 接收URL参数中的balance，赋值给currentAmount
			if (options.balance) {
				this.rewardData.currentAmount = parseFloat(options.balance);
				console.log('接收到的balance:', options.balance);
				console.log('赋值给currentAmount:', this.rewardData.currentAmount);
			}
		},
		onShow() {
			// 每次显示页面时重新加载数据
			this.loadRewardData();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},

			// 获取奖励数据
			async getRewardData() {
				try {
					// 这里可以调用API获取真实数据
					// const response = await this.$api.getRewardInfo()
					// this.rewardData = response.data

					// 模拟数据
					this.rewardData = {
						currentAmount: 0,
						yesterdayEarnings: 0,
						totalWithdrawn: 0
					}
				} catch (error) {
					console.error('获取奖励数据失败:', error)
				}
			},

			// 处理提现
			handleWithdraw() {
				if (this.rewardData.currentAmount <= 0) {
					uni.showToast({
						title: '暂无可提现金额',
						icon: 'none'
					})
					return
				}

				// 跳转到提现页面
				uni.navigateTo({
					url: '/pages/myRewards/rewardWithdraw'
				})
			},

		
		}
	}
</script>

<style lang="scss">
	.container {
		background: #f5f5f5;
		min-height: 100vh;
	}

	/* 导航栏 */
	.nav-bar {
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
		position: relative;
	}

	.status-bar {
		height: calc(var(--status-bar-height, 0) + 20rpx);
		background: transparent;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.nav-left,
	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.back-icon {
		font-size: 48rpx;
		color: white;
		font-weight: bold;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 700;
		color: white;
	}

	.nav-right {
		gap: 15rpx;
	}

	.more-icon,
	.dash-icon,
	.target-icon {
		font-size: 32rpx;
		color: white;
	}

	/* 奖励金额区域 */
	.reward-section {
		margin: 30rpx;
	}

	.reward-card {
		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
		border-radius: 20rpx;
		padding: 40rpx 35rpx;
		box-shadow: 0 8rpx 25rpx rgba(26, 26, 46, 0.3);
		color: white;
		text-align: center;
	}

	.reward-header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		margin-bottom: 20rpx;
	}

	.reward-title {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.help-icon {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reward-amount {
		font-size: 80rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
		display: block;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.withdraw-btn {
		background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
		border-radius: 25rpx;
		padding: 20rpx 40rpx;
		margin-bottom: 40rpx;
		display: inline-block;
		box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.3);
		transition: all 0.3s ease;
	}

	.withdraw-btn:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4);
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 600;
		color: white;
	}

	.stats-row {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: 600;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 空状态区域 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 60rpx;
		background: #f5f5f5;
	}

	.empty-icon {
		position: relative;
		margin-bottom: 40rpx;
	}

	.icon-text {
		font-size: 120rpx;
		color: #ccc;
		display: block;
	}

	.icon-magnifier {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
	}

	.icon-plus {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: bold;
	}

	.icon-minus {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: bold;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		font-weight: 500;
	}
</style>